
const goodsList = JSON.parse(localStorage.getItem('goodsList')) || []
// console.log(goodsList)
//订单信息栏的渲染  先创建渲染函数 render()
function render(arr) {
    // 判断arr是否为空数组
    if (arr.length === 0) {
        // arr为空时  渲染ul页面内容为下
        document.querySelector('#list').innerHTML = `
        <div class="box">
           <img src="http://megasu.gitee.io/rabbit-vue3-ts/assets/none.5c042de4.png" alt="">
           <p>购物车内暂时没有商品</p>
           <button>继续逛逛</button>
        </div>
        `
        // let newArr = toggle()
        localStorage.setItem('goodsList', JSON.stringify(goodsList))
        // 调用header.js中的购物车数量刷新函数
        shoppingCarShow(toggle())
    }
    // arr不为空时  渲染ul页面内容为下
    else {
        document.querySelector('#list').innerHTML = arr.map((item, index) =>
            `<li>
            <!-- 单选按钮 -->
            <div class="checkbox">
                <input type="checkbox" name="check" data-set='${index}' class="ck" ${item.selected ? 'checked' : ''}>
            </div>
            <!-- 商品信息 -->
            <div class="goods">
                <!-- 商品图片 -->
                <div class="goods_pic ">
                    <a href="#">
                        <img src="${item.picture}" alt=""></a>
                </div>
                <!-- 商品文字说明 -->
                <div class="txt">
                    <h5>${item.name}</h5>
                    <p>${item.attrsText}</p>
                </div>
            </div>
            <!-- 商品单价 -->
            <div class="price">
                <span>￥</span>
                <p id="price">${item.price}</p>
            </div>
            <!-- 商品数量 -->
            <div class="count">
                <div class="numBox" data-numId='${index}'>
                    <a href="" id="reduce">-</a>
                    <span id="countNum">${item.count}</span>
                    <a href="" id="add">+</a>
                </div>
            </div>
            <!-- 商品总价 -->
            <div class="totalPrice red">
                ￥ <span id="totalPrice">${(item.price * item.count).toFixed(2)}</span>
            </div>
            <!-- 商品操作 -->
            <div class="lab">
                <a href="">移入收藏夹</a>
                <a href="" class="del" data-index='${index}'>删除</a>
                <a href="">找相似</a>
            </div>
        </li>`
        ).join('')
        //获取全选按钮
        const checkAll = document.querySelector('#checkAll')
        //获取所有的单选按钮
        const cks = document.querySelectorAll('.ck')
        // 页面初始化的时候单选框都被选中那么全选框也被选中
        checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length
        // let newArr = toggle()
        localStorage.setItem('goodsList', JSON.stringify(goodsList))
        // 调用header.js中的购物车数量刷新函数
        shoppingCarShow(toggle())
    }
}
//调用渲染函数render()
render(goodsList)

// 事件委托 订单栏的事件监听
document.querySelector('.orders').addEventListener('click', (e) => {
    //获取全选按钮
    const checkAll = document.querySelector('#checkAll')
    //获取所有的单选按钮
    const cks = document.querySelectorAll('.ck')
    let tar = e.target
    //注册点击事件
    //全选按钮的额点击事件
    //单选按钮的额点击事件
    if (tar.id === 'checkAll') {
        cks.forEach(item => item.checked = tar.checked)
        // 调用这个复用函数
        toggle()
        // 调用header.js中的购物车数量刷新函数
        shoppingCarShow(toggle())
    } else if (tar.className === 'ck') {
        checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length
        // 调用这个复用函数
        const tar_index = tar.dataset.set
        // console.log(goodsList[tar_index].selected)
        goodsList[tar_index].selected = !goodsList[tar_index].selected
        console.log(goodsList)
        localStorage.setItem('goodsList', JSON.stringify(goodsList))
        toggle()
        // 调用header.js中的购物车数量刷新函数
        shoppingCarShow(toggle())
    } else if (tar.id === 'add') {
        // 阻止默认行为
        e.preventDefault()
        let li = tar.parentNode.parentNode.parentNode
        li.querySelector('#countNum').innerHTML++
        li.querySelector('#totalPrice').innerHTML = (li.querySelector('#price').innerHTML * li.querySelector('#countNum').innerHTML).toFixed(2)
        // totalShow()
        // 调用header.js中的购物车数量刷新函数
        console.log(li.querySelector('#countNum').innerHTML)
        goodsList[tar.parentNode.dataset.numid].count=li.querySelector('#countNum').innerHTML
        render(goodsList)
        shoppingCarShow(toggle())
    } else if (tar.id === 'reduce') {
        // 阻止默认行为
        e.preventDefault()
        let li = tar.parentNode.parentNode.parentNode
        if (li.querySelector('#countNum').innerHTML > 1) {
            li.querySelector('#countNum').innerHTML--
            li.querySelector('#totalPrice').innerHTML = (li.querySelector('#price').innerHTML * li.querySelector('#countNum').innerHTML).toFixed(2)
            // totalShow()
            goodsList[tar.parentNode.dataset.numid].count=li.querySelector('#countNum').innerHTML
            render(goodsList)
        }
    } else if (tar.className === 'del') {
        // 阻止默认行为
        e.preventDefault()
        // 得到自定义属性的值
        const index = tar.dataset.index
        // 删除数组中的某一项
        goodsList.splice(index, 1)
        console.log(goodsList)
        // 调用渲染函数 render()  渲染订单栏
        render(goodsList)
        // 调用header.js中的购物车数量刷新函数
        shoppingCarShow(toggle())
    }
    // 任何操作之后都调用渲染函数totalShow()  来渲染结算栏
    totalShow()
    // 调用header.js中的购物车数量刷新函数
    shoppingCarShow(toggle())
})



//渲染结算栏  先创建一个渲染函数totalShow()
function totalShow() {
    let sum = [...document.querySelectorAll('.ck:checked')].reduce((prev, item) =>
        prev + +item.parentNode.parentNode.querySelector('#totalPrice').innerHTML, 0)
    // console.log(sum)
    let num = [...document.querySelectorAll('.ck:checked')].reduce((prev, item) =>
        prev + +item.parentNode.parentNode.querySelector('#countNum').innerHTML, 0)
    let num_total = [...document.querySelectorAll('.ck')].reduce((prev, item) =>
        prev + +item.parentNode.parentNode.querySelector('#countNum').innerHTML, 0)
    // 用一个数组去接收我们要的 num，sum，num_total
    const totalShowArr = [num, sum, num_total]
    // 渲染main_bottom结算栏
    const main_bottom = document.querySelector('.main_bottom').querySelector('p')
    main_bottom.innerHTML = `共 ${totalShowArr[2]} 件有效商品，已选择 ${totalShowArr[0]} 件，商品合计：<span class="red
    ">￥${totalShowArr[1]}</span>`
    return main_bottom.innerHTML
}


//调用渲染函数totalShow()
totalShow()
// 注册button的点击事件  调用toggle（）将newAll转换成字符串存储在本地
document.querySelector('.pay button').addEventListener('click', function () {
    let newArr = toggle()
    localStorage.setItem('payList', JSON.stringify(newArr))
})


// 创建一个复用函数toggle 主要作用是将勾选中的那组数组信息放到一个对象中，将这个对象添加进新的数组中形成一个新的数组对象  返回这个新数组用于button的点击事件
function toggle() {
    let newArr = []
    let cks1 = [...document.querySelectorAll('.ck:checked')]
    cks1.forEach(item => {
        const All = item.parentNode.parentNode
        const newObj = {
            name: All.querySelector('.txt h5').innerHTML,
            attrsText: All.querySelector('.txt p').innerHTML,
            picture: All.querySelector('img').src,
            price: All.querySelector('#price').innerHTML,
            selected: true,
            count: All.querySelector('#countNum').innerHTML,
        }
        newArr.push(newObj)
    })
    return newArr
}